<template>
  <div class="goods">
  	<div class="meau-wrapper">
  		<ul>
  			<li v-for="(item,index) in goods" class="meau-item">
  				<span class="text">
  					<span class="icon"></span>
  					{{item.name}}
  				</span>
  			</li>
  		</ul>
  	</div>
  	<div class="foods-wrapper"></div>
  </div>
</template>

<script>
  export default {
  
	data(){
		return {
			goods:''
		}
	},
	created() {
      this.$http.get('/api/goods').then(function(response){
        response=response.body;
        if(response.errno===ERR_OK){
          this.goods = response.data;
          //console.log(this.seller);
        }
      })
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.goods{ display:flex; position: absolute; top:176px; bottom: 46px; width: 100%; overflow: hidden;}
	.meau-wrapper{ width: 80px; flex: 0 0 80px; background-color: #f3f5f7;}
	.meau-wrapper .meau-item { display: table; height: 54px; width: 56px; line-height: 54px; line-height: 14px; padding: 0 12px;}
	.meau-wrapper .meau-item.current {position: relative; margin-top: -1px; z-index: 10; background: #fff; font-weight: 700;}
	.meau-wrapper .meau-item .text {display: table-cell; width: 56px;vertical-align: middle;font-size: 12px;border-bottom:1px solid rgba(7, 17, 27, .1);}
	.meau-wrapper .meau-item.current .text{border:none;}
	.meau-wrapper .meau-item .text .icon{display: inline-block; vertical-align: top; width: 12px; height: 12px; margin-right: 2px; background-size: 12px 12px; background-repeat: no-repeat;}
	.meau-wrapper .meau-item .text .icon.decrease{background-image: url(images/decrease_3@2x.png);}
	.meau-wrapper .meau-item .text .icon.discount{background-image: url(images/discount_3@2x.png);}
	.meau-wrapper .meau-item .text .icon.guarantee{background-image: url(images/guarantee_3@2x.png);}
	.meau-wrapper .meau-item .text .icon.invoice{background-image: url(images/invoice_3@2x.png);}
	.meau-wrapper .meau-item .text .icon.special{background-image: url(images/special_3@2x.png);}
</style>
